/* color palette from <https://github.com/vuejs/theme> */
:root {
	--vt-c-black: #181818;
	--vt-c-black-mute: #282828;
	--vt-c-black-soft: #222222;
	--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
	--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
	--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
	--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
	--vt-c-indigo: #2c3e50;
	--vt-c-text-dark-1: var(--vt-c-white);
	--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
	--vt-c-text-light-1: var(--vt-c-indigo);
	--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
	--vt-c-white: #ffffff;
	--vt-c-white-mute: #f2f2f2;
	--vt-c-white-soft: #f8f8f8;
}

/* semantic color variables for this project */
:root {
	--color-background: var(--vt-c-white);
	--color-background-mute: var(--vt-c-white-mute);
	--color-background-soft: var(--vt-c-white-soft);
	--color-border: var(--vt-c-divider-light-2);
	--color-border-hover: var(--vt-c-divider-light-1);
	--color-heading: var(--vt-c-text-light-1);
	--color-text: var(--vt-c-text-light-1);
	--section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: var(--vt-c-black);
		--color-background-mute: var(--vt-c-black-mute);
		--color-background-soft: var(--vt-c-black-soft);
		--color-border: var(--vt-c-divider-dark-2);
		--color-border-hover: var(--vt-c-divider-dark-1);
		--color-heading: var(--vt-c-text-dark-1);
		--color-text: var(--vt-c-text-dark-2);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;

	font-weight: normal;
}

body {
	overflow: hidden;

	min-height: 100vh;

	transition: color 0.5s, background-color 0.5s;

	color: var(--color-text);
	background: var(--el-color-primary-light-9);
    font-family: "open sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
	
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body div {
	box-sizing: border-box;
}

li {
	list-style: none;
}


/*
    * author    : Sean
    * des       : 文字粗細
*/
$fontWeight: "bold", "400", "normal" !default;

@each $key in $fontWeight {
	.fw-#{$key} {
		font-weight: #{$key};
	}
}

/*
    * author    : Sean
    * des       : 文字截取
*/

.text-ellipsis {
	overflow: hidden;

	white-space: nowrap;
	text-overflow: ellipsis;
}

@for $i from 2 through 6 {
	.text-ellipsis-#{$i} {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;

		text-overflow: ellipsis;

		-webkit-line-clamp: #{$i};
	}
}

/*
    * author    : Sean
    * des       : 内、外間距
*/

$space: 0,
	5,
	10,
	15,
	20,
	25,
	30,
	35,
	40,
	45,
	50,
	55,
	60 !default;

@each $key in $space {
	.m-#{$key} {
		margin: #{$key}rem;
	}

	.m-t-#{$key} {
		margin-top: #{$key}rem;
	}

	.m-b-#{$key} {
		margin-bottom: #{$key}rem;
	}

	.m-r-#{$key} {
		margin-right: #{$key}rem;
	}

	.m-l-#{$key} {
		margin-left: #{$key}rem;
	}

	//
	.p-#{$key} {
		padding: #{$key}rem;
	}

	.p-t-#{$key} {
		padding-top: #{$key}rem;
	}

	.p-b-#{$key} {
		padding-bottom: #{$key}rem;
	}

	.p-r-#{$key} {
		padding-right: #{$key}rem;
	}

	.p-l-#{$key} {
		padding-left: #{$key}rem;
	}
}

/*
    * author    : Sean
    * des       : font-size
*/

$fontSize: (
	(12,
		18rem),
	(14,
		20rem),
	(16,
		1.54),
	(20,
		1.3),
	(26,
		1.24),
	(30,
		1.3)) !default;

@each $key,
$lineHeight in $fontSize {
	.fs-#{$key} {
		font-size: #{$key}rem;
		line-height: #{$lineHeight};
	}
}

/*
    * author    : Sean
    * des       : font-color
*/

$fontColor: (
	("white",
		#ffffff),
	("black",
		#333333),
	("gray",
		#666666),
	("lightgray",
		#999999),
	("red",
		#ff0000),
	("green",
		#49c177),
	("orange",
		#f27838),
	("primary",
		#409EFF)) !default;

@each $key,
$cval in $fontColor {
	.fc-#{$key} {
		color: #{$cval};
	}
}

.flex {
	display: flex;

	&.middle {
		align-items: center;
	}

	&.center {
		justify-content: center;
	}

	&.end {
		justify-content: flex-end;
	}

	&.space-between {
		justify-content: space-between;
	}

	&.space-around {
		justify-content: space-around;
	}

	.flex1 {
		flex: 1;
	}
}

.display-block {
	display: block;
}